<template>
	<view class="cart_item">
		<view class="cart-card" v-for="(goodsInfo,cartIdx) in cartListData" :key="cartIdx">
			<!-- 店铺头部 -->
			<view class="shop-header">
				<view class="shop-info">
					<view class="shop-details">
						<text class="shop-name">{{goodsInfo.shop.name}}</text>
						<text class="shop-desc">{{goodsInfo.shop.description}}</text>
					</view>
				</view>
				<view class="shop-select">
					<radio @click="handleShopSelect(goodsInfo)" :class="goodsInfo.shop.isSelected?'checked':''"
						:checked="goodsInfo.shop.isSelected" :value="goodsInfo.shop._id">
					</radio>
				</view>
			</view>

			<!-- 商品列表 -->
			<view class="products-list">
				<view class="product-item" v-for="goodsItem in goodsInfo.items" :key="goodsItem._id"
					:class="modalName=='move-box-'+ goodsItem._id?'move-cur':''" @touchstart="ListTouchStart"
					@touchmove="ListTouchMove" @touchend="ListTouchEnd" :data-target="'move-box-' + goodsItem._id">

					<view class="product-content">
						<view class="product-image" @click="goPage(goodsItem)">
							<image :src="goodsItem.product.mainImage" mode="aspectFill"></image>
						</view>
						<view class="product-info" @click="goPage(goodsItem)">
							<view class="product-name">{{goodsItem.product.name}}</view>
							<view class="product-price">
								<text
									class="current-price">￥{{goodsItem.product.displayPrice || goodsItem.product.currentPrice || goodsItem.product.price}}</text>
								<text class="original-price"
									v-if="goodsItem.product.isSpecialOffer">￥{{goodsItem.product.originalPrice}}</text>
							</view>
						</view>
						<view class="product-actions">
							<view class="quantity-control">
								<cc-numbox @change="numChangeClick" :goodsId="goodsItem._id"
									:quantity="goodsItem.quantity||1" :maxNum="goodsItem.product.stock || 9999999999"
									:isSetMax="true"></cc-numbox>
							</view>
							<view class="product-select">
								<radio @click="handleProductSelect(goodsInfo.shop,goodsItem)"
									:class="goodsItem.isSelected?'checked':''" :checked="goodsItem.isSelected"
									:value="goodsItem._id">
								</radio>
							</view>
						</view>
					</view>

					<!-- 删除按钮 -->
					<view class="delete-btn" @click="deleteGoodsItem(goodsItem._id)">
						<text class="delete-text">删除</text>
					</view>
				</view>
			</view>

			<!-- 配送服务 -->
			<view class="delivery-service">
				<view class="delivery-info">
					<view class="delivery-icon">
						<text class="cuIcon-deliver"></text>
					</view>
					<view class="delivery-text">
						<text class="delivery-label">送货上门服务</text>
						<text class="delivery-desc">专业配送，安全便捷</text>
					</view>
				</view>
				<view class="delivery-price">
					<text class="price">￥{{systemDeliveryServiceFee}}</text>
					<radio @click="handleDeliveryService(goodsInfo.shop)"
						:class="goodsInfo.deliveryService?'checked':''" :checked="goodsInfo.deliveryService"
						:value="goodsInfo.shop._id">
					</radio>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['cartListData', 'systemDeliveryServiceFee'],
		data() {
			return {
				num: 0,
				modalName: null,
				listTouchStart: 0,
				listTouchDirection: null,
			}
		},

		methods: {

			goPage(item) {
				// this.$store.commit('setGoodsItem', item)
				this.$router.smartNavigate({
					url: '/pages/homePages/sam/samGoodsInfo?id=' + item.product._id
				})
			},

			// 店铺全选
			handleShopSelect(data) {
				this.$emit('update-selection', {
					shopId: data.shop._id,
					isSelected: !data.shop.isSelected
				})
			},
			// 单个商品选择
			handleProductSelect(shop, product) {
				this.$emit('update-selection', {
					shopId: shop._id,
					productId: product._id,
					isSelected: !product.isSelected
				})
			},
			//是否选择送货上门
			handleDeliveryService(shop) {
				this.$emit('update-Delivery', shop._id)
			},
			numChangeClick(data) {
				this.$emit('updataGoods', data)
			},
			deleteGoodsItem(id) {
				this.$emit("deleteItem", id)
			},
			// ListTouch触摸开始，获取触摸点距盒子左侧的距离
			ListTouchStart(e) {
				this.listTouchStart = e.touches[0].pageX
			},
			// ListTouch计算方向，
			ListTouchMove(e) {
				if (this.listTouchStart - e.touches[0].pageX > 50) {
					this.listTouchDirection = 'left'
				}
			},
			// ListTouch计算滚动
			ListTouchEnd(e) {
				if (this.listTouchDirection == 'left') {
					this.modalName = e.currentTarget.dataset.target
				} else {
					this.modalName = null
				}
				this.listTouchDirection = null
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cart_item {
		padding: 24rpx;
		padding-bottom: 100rpx;
		background-color: #f8f9fa;
	}

	.cart-card {
		background: white;
		border-radius: 20rpx;
		margin-bottom: 24rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
	}

	// 店铺头部
	.shop-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx;
		border-bottom: 1px solid #f0f0f0;
		background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);

		.shop-info {
			display: flex;
			align-items: center;
			flex: 1;

			.shop-details {
				flex: 1;

				.shop-name {
					font-size: 32rpx;
					font-weight: 600;
					color: #333;
					display: block;
					margin-bottom: 8rpx;
				}

				.shop-desc {
					font-size: 24rpx;
					color: #999;
					display: block;
				}
			}
		}

		.shop-select {
			radio {
				transform: scale(0.8);
			}
		}
	}

	// 商品列表
	.products-list {
		.product-item {
			position: relative;
			background: white;
			transition: transform 0.3s ease;

			&.move-cur {
				transform: translateX(-120rpx);
			}

			.product-content {
				display: flex;
				align-items: center;
				padding: 24rpx;
				border-bottom: 1px solid #f5f5f5;

				.product-image {
					width: 120rpx;
					height: 120rpx;
					margin-right: 20rpx;
					border-radius: 16rpx;
					overflow: hidden;
					flex-shrink: 0;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.product-info {
					flex: 1;
					margin-right: 20rpx;

					.product-name {
						font-size: 30rpx;
						font-weight: 600;
						color: #333;
						line-height: 1.4;
						margin-bottom: 12rpx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
					}

					.product-price {
						display: flex;
						align-items: center;
						gap: 12rpx;

						.current-price {
							font-size: 32rpx;
							font-weight: 700;
							color: #FF2E44;
						}

						.original-price {
							font-size: 24rpx;
							color: #999;
							text-decoration: line-through;
						}
					}
				}

				.product-actions {
					display: flex;
					flex-direction: column;
					align-items: center;
					gap: 16rpx;

					.quantity-control {
						// 数量控制器样式
					}

					.product-select {
						radio {
							transform: scale(0.8);
						}
					}
				}
			}

			.delete-btn {
				position: absolute;
				right: -120rpx;
				top: 0;
				width: 120rpx;
				height: 100%;
				background: linear-gradient(135deg, #FF4D4F 0%, #FF7875 100%);
				display: flex;
				align-items: center;
				justify-content: center;

				.delete-text {
					color: white;
					font-size: 28rpx;
					font-weight: 600;
				}
			}
		}
	}

	// 配送服务
	.delivery-service {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx;
		background: linear-gradient(135deg, #F0F9FF 0%, #E6F3FF 100%);

		.delivery-info {
			display: flex;
			align-items: center;
			flex: 1;

			.delivery-icon {
				width: 48rpx;
				height: 48rpx;
				background: #1890FF;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 16rpx;

				text {
					color: white;
					font-size: 24rpx;
				}
			}

			.delivery-text {
				flex: 1;

				.delivery-label {
					font-size: 28rpx;
					font-weight: 600;
					color: #333;
					display: block;
					margin-bottom: 4rpx;
				}

				.delivery-desc {
					font-size: 24rpx;
					color: #666;
					display: block;
				}
			}
		}

		.delivery-price {
			display: flex;
			align-items: center;
			gap: 16rpx;

			.price {
				font-size: 32rpx;
				font-weight: 700;
				color: #FF2E44;
			}

			radio {
				transform: scale(0.8);
			}
		}
	}

	// 兼容旧样式
	.goods_img {
		width: 120rpx;
		height: 120rpx;
		margin-right: 20rpx;
	}

	.goods_img image {
		border-radius: 20rpx;
	}

	.goods_title {
		font-weight: 700;
		font-size: 32rpx;
		color: #000;
		line-height: 40rpx;
	}

	.goods_pire {
		font-weight: 700;
		font-size: 32rpx;
		color: #FF2E44;
		line-height: 46rpx;
	}

	.goods_num {
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 0;
	}

	.count_price,
	.count_buy {
		margin-right: 20rpx;
	}

	.count_price {
		color: red;
	}

	.count_buy {
		color: orange;
	}

	.payment_btn {
		color: #fff;
		background-color: #f37b1d;
		padding: 12rpx 24rpx;
		border-radius: 20rpx;
	}

	.cu-list>.cu-item .move {
		background-color: #f5f5f5;
		justify-content: center;
		align-items: center;
	}

	.reomve_btn {
		display: block !important;
		width: 100px;
		height: 35px;
		line-height: 35px;
		text-align: center;
		border-radius: 20rpx;
	}
</style>